<template>
  <div class="homepage">
    <Search class="search1" :style="backgroundColor" />
    <div class="content">
      <Banner class="banner" />
      <Logo />
      <Navigation />
      <Sale />
      <Activity />
      <Brand />
      <Slogan />
      <Sift />
      <Hot />
      <Brandzone />
      <Shoes />
      <Adidas />
      <van-icon @click="toTop" v-show="isShow" name="upgrade" size="40" right="0" />
    </div>
    <Myfooter />
  </div>
</template>

<script>
import Myfooter from "../components/Myfooter";
import Search from "../components/Search";
import Banner from "../components/Banner";
import Logo from "../components/Logo";
import Navigation from "../components/Navigation";
import Activity from "../components/Activity";
import Sale from "../components/Sale";
import Brand from "../components/Brand";
import Slogan from "../components/Slogan";
import Sift from "../components/Sift";
import Hot from "../components/Hot";
import Brandzone from "../components/Brandzone";
import Shoes from "../components/Shoes";
import Adidas from "../components/Adidas";

export default {
  name: "Index",
  data: function() {
    return {
      isShow: false,
      backgroundColor: "background-color:rgba(197, 194, 194, 0.6)"
    };
  },
  components: {
    Search,
    Myfooter,
    Banner,
    Logo,
    Navigation,
    Sale,
    Activity,
    Brand,
    Slogan,
    Sift,
    Hot,
    Brandzone,
    Shoes,
    Adidas
  },
  methods: {
    toTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      console.log(document.body.scrollTop);
    },
    // 监听回到顶部按钮距浏览器顶部的距离，滚动的距离如果大于浏览器高度时，显示按钮
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log("距离顶部的距离:" + scrollTop);
      // let browserHeight = window.outerHeight;
      if (scrollTop > 170) {
        this.isShow = true;
        this.backgroundColor="background-color:rgba(230, 1, 17, 0.8);"
      } else {
        this.isShow = false;
        this.backgroundColor="background-color:rgba(197, 194, 194, 0.6)"
      }
    },
  },
  
  // 监听滚动事件
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
   
  },
  destroyed() {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener("scroll", this.scrollToTop);
  }
};
</script>

<style lang="scss" scoped>
// homepage 主页
.homepage {
  width: 100%;
  overflow: hidden;
}
.content {
  flex: 1;
  overflow-y: visible;
  margin-bottom: 50px;
}
.banner {
  position: relative;
}
.search1 {
  position: fixed;
  z-index: 1;
  // background-color: rgba(197, 194, 194, 0.6);
}
.van-icon {
  position: fixed;
  bottom: 70px;
  margin-left: 320px;

}
</style>